<template>
    <div class="layout">
        <div class="header">
            <svg width="130" height="26">
                <image xlink:href="./management/img/logo.svg" src="./management/img/logo.png" width="130" height="26" />
            </svg>
        </div>
        <div class="layout-body">
            <div class="sider">
                <ul>
                    <li :class="{'active' : siderIndex == 1}"><a @click="link('用户管理', '/userManagement', 1)">用户管理</a></li>
                    <li :class="{'active' : siderIndex == 2}"><a @click="link('钱包管理', '/walletManagement', 2)">钱包管理</a></li>
                </ul>
            </div>
            <div class="content">
                <router-view></router-view>
                <router-view name="pay"></router-view>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                siderIndex: 0,
            }
        },
        watch:{
            $route(to,from){
                if (to.path.indexOf('/userManagement') != -1) {
                    this.siderIndex = 1;
                } else if (to.path.indexOf('/walletManagement') != -1) {
                    this.siderIndex = 2;
                }
            }
        },
        mounted() {
            console.log(this.$route)
            if (this.$route.path.indexOf('/userManagement') != -1) {
                this.siderIndex = 1;
            } else if (this.$route.path.indexOf('/walletManagement') != -1) {
                this.siderIndex = 2;
            }
        },
        methods: {
            link(info, to, index) {
                this.siderIndex = index;
                this.contentTitle = info,
                this.$router.push({path: to})
            }
        }
    }
</script>
 
<style scoped>
    .clearfix::before {
        content: "";
        display: block;
        clear: both;
        height: 0;
        font-size: 0;
    }
    .header {
        width: 100%;
        height: 70px;
        padding: 22px 0 0 25px;
        background: #2b3643;
        box-sizing: border-box;
    }

    .layout-body {
        position: absolute;
        top: 70px;
        left: 0;
        bottom: 0;
        width: 100%;
        background: #f0f2f5;
    }

    .sider {
        float: left;
        width: 256px;
        height: 100%;
        background: #364150;
        box-shadow: 2px 0px 6px 0px rgba(0, 21, 41, 0.35);
    }

    .content {
        margin-left: 256px;
        height: 100%;
        position: relative;
    }

    .sider li {
        height: 60px;
        line-height: 60px;
        padding-left: 20px;
        cursor: pointer;
    }

    .sider li a {
        display: inline-block;
        width: 100%;
        height: 100%;
        color: #b0bcc8;
    }

    .active {
        background: #3d4b5c;
        border-left: 4px solid #36c6d3;
        padding-left: 16px !important;
    }

    .sider li:hover {
        background: #3d4b5c;
    }
</style>
